<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>#{get 'title' /} | bingo!</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
	
	<link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}" />
	<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/screen.css'}" />
	
	<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/bootstrap.css'}" />
	<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/bootstrap-responsive.css'}" />
	
#{get 'moreStyles' /}
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/bootstrap.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/index.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/notification.js'}" type="text/javascript" charset="${_response_encoding}"></script>

	<script>

	$(document).ready(function() {
		var rootPath = "@@{Application.index()}";
		var unreadCount = 0;
		#{if unreadNotifications} unreadCount = ${unreadNotifications.size()}; #{/if}
		InitNotification(unreadCount);

		//Set as read when notification windows opens
		$("ul.dropdown-menu").mouseover(function() {
			if (unreadCount>0){
				SetNotificationsAsRead(rootPath);
				//reset
				unreadCount = 0;
				InitNotification(0);
			}
		});
	});
	function getURL(path) {
		if (path && "/" == path.charAt(0)) {
			path = path.substring(1);
		}
		return "@{Application.index()}" + path;
	}
	</script>
#{get 'moreScripts' /}
</head>

<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">

<div class="container">
<ul class="nav">
    <li><a class="brand" href="@{Application.index()}">bingo!</a></li>
</ul>

<ul class="nav pull-right">

	#{if isLoggedIn}
				 <li class="dropdown" id="menu1">
				    <a class="notification-toggle" data-toggle="dropdown" href="#menu1">
				      Notifications (
				      	<span id="counter" style="cursor:pointer;">
							<strong style="padding:0px; margin-left:-4px; margin-right:-4px;">0</strong>
						</span>)
				      <b class="caret"></b>
				    </a>
				    
				    #{if notifications}
				    <ul class="dropdown-menu">
				      #{list items:notifications, as:'notification'}
						<li>
								<a href="${notification.link}" #{if !notification.isread} class="unread" #{/if}>
									${notification.message}
								</a>
						</li>
						#{/list}
				    </ul>
				    #{/if}
				  </li>
			    <li class="active"><a href="@{PrivateMessages.inbox()}">Inbox (${models.PrivateMessage.getUnreadMessagesCount(user)})</a></li>
			    <li class="active"><a href="@{Users.ownProfile()}">My Profile</a></li>
			    <li class="active"><a href="@{Users.editProfile()}">Edit Profile</a></li>
			    <li class="active"><a href="@{Secure.logout()}">Logout</a></li>
#{/if}

   </ul>

</div>

</div>
</div>
<div style="padding-top:60px"></div>
<!-- nav end -->

<div>
<a name="top"></a>
<div id="searchForm" style="display: none;">
    <input type="search" name="query" value="" placeholder="search..." />
</div>
</div>

<div id="content-wrap" class="clear">#{doLayout /}</div>
<div id="footer-outer" class="clear">
	<div id="footer-wrap">
		#{if isLoggedIn}
		<div id="gallery" class="clear" style="margin-top: 10px">
			<h3>Recent Users</h3>
			#{list items:models.User.find("order by registrationDate DESC").fetch(5), as:'newuser'}
			<a href="@{Users.profile(newuser.id)}">
			#{if newuser.photo.exists()}
			<img class="avatar"
				src="@{Application.showUserPhoto(newuser.id)}"
				alt="${newuser.fullname} Photo" title="${newuser.fullname}"
				style="margin-right: 5px;" /> 
		    #{/if}
		    #{else}
		    <img class="avatar"
				src="/public/images/lbi02.png" alt="Default Avatar"
				title="${newuser.fullname}" style="margin-right: 5px;" />
			#{/else}
			</a>
			#{/list}
		</div>
		#{/if}
		<div class="col-a">
			<h3>About</h3>
			<p>This project is developed in SWE574 class @ Bogazici University Software Engineering Department.</p>
			<p>For more information: <a href="@{Application.contact()}">visit contact page</a></p>
		</div>
		<div class="col-a">
			<h3>Site Links</h3>
			<div class="footer-list">
				<ul>
					<li><a href="@{Application.index()}">Home</a></li>
					<li><a href="@{Application.about()}">About</a></li>
					<li><a href="@{Application.faq()}">FAQ</a></li>
					<li><a href="@{Application.termsOfService()}">Terms Of Service</a></li>
					<li><a href="@{Application.contact()}">Contact</a></li>
				</ul>
			</div>

		</div>
		<div class="col-a">
			<h3>Statistics</h3>
			<div class="footer-list">
				<ul>
					<li>${(models.User.findAll()).size()} Users!</li>
				</ul>
			</div>

		</div>
		<!-- 
 #{if isLoggedIn}
<div class="col-b">
  <h3>Tag Cloud</h3>
  <div class=" tag_cloud">
           <ul>
      <p>Offers</p>
      #{list items:models.Tag.find().fetch(6), as:'tag'}
      <a href="@{Offers.search(tag)}">${tag}</a>
      #{/list}
           </ul>
           <ul>
      <p>Requests</p>
      #{list items:models.Tag.find().fetch(6), as:'tag'}
      <a href="@{Requests.search(tag)}">${tag}</a>
      #{/list}
    </ul>
  </div>
  
</div>
#{/if}
 -->

	</div>
</div>

<div id="footer-bottom">
	<p class="bottom-left">
		&copy; 2012 <strong>SWE 574 Team 1 Members</strong>&nbsp; &nbsp;
		&nbsp;
	</p>
	<p class="bottom-right">
		<strong><a href="#top">Back to Top</a></strong>
	</p>
</div>

</body>
</html>
